<style lang="less">

  .editor-toolbar {
    position: fixed;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02);
    z-index: 1000;
    top: 64px;
  }

  .editor-wrapper {
    background: #fafafa;
    padding: 52px 0;
    /*height: calc(100vh - 20px);*/
    overflow: auto;
  }

  .editor-container {
    position: relative;
    width: 812px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #f0f0f0;
  }

  .editor-container .editor-extra {
    padding: 32px 60px 0;

    .editor-title {
      margin-bottom: 4px;

      .editor-title-input {
        border: 0;
        outline: none;
        resize: none;
        padding: 0;
        line-height: 1.3;
        width: 100%;
        font-size: 36px;
        font-weight: 700;
      }
    }
  }

  .editor-container .am-engine {
    min-height: 824px;
    padding: 20px 60px 90px;
  }

</style>

<template>
  <div class="editor-toolbar">
    <am-toolbar v-if="engine" :engine="engine" :items="toolbarItems"/>
  </div>
  <div class="editor-wrapper">
    <div class="editor-container">
      <div class="editor-extra">
        <div class="editor-title">
          <textarea rows="1" placeholder="请输入标题" class="editor-title-input"
                    ref="titleInputRef"
                    @input="handleTitleInput"
                    @keydown.enter.prevent="handleTitleEnter"></textarea>
        </div>
      </div>
      <div ref="editorContainer"></div>
    </div>
  </div>
</template>

<script lang="ts">
  import {ref} from 'vue'
  import useEditor, {AmToolbar} from './useEditor'
  import useEditorTitle from './useEditorTitle'
  import Affix from 'ant-design-vue/es/affix'

  export default {
    name: "Editor",
    props: {},
    setup() {
      const toolbarTop = ref<number>(64);

      const {engine, toolbarItems, editorContainer} = useEditor();

      const {titleInputRef, handleTitleEnter, handleTitleInput} = useEditorTitle(engine);

      return {
        toolbarTop,
        editorContainer,
        engine,
        toolbarItems,
        titleInputRef,
        handleTitleEnter,
        handleTitleInput
      }
    },

    components: {
      [Affix.name]: Affix,
      AmToolbar
    }
  }
</script>
